import React, { useState } from 'react'
// 导入 antd 日期组件
import { DatePicker, Button, Tooltip, Typography  } from 'antd';
//导入图标
import { AlipayCircleOutlined, WechatOutlined, SearchOutlined } from '@ant-design/icons';

const { Text, Link } = Typography;
const { Paragraph } = Typography;

export default function AntdCom() {
  //声明一个状态
  let [loading, setLoading] = useState(false);
  const [editableStr, setEditableStr] = useState('This is an editable text.');
  return (
    <div style={{ padding: 20 }}>
      <h2>初体验</h2>
      <DatePicker />

      <h2>按钮</h2>
      <Button type="primary">点我</Button>
      <Button type="primary" danger>
        危险按钮
      </Button>
      <Button danger>
        危险按钮
      </Button>
      <Tooltip title="search">
        <Button type="primary" shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button type="primary" loading={loading} onClick={() => {
        //更新 loading 值的状态
        setLoading(true);
        //定时器
        setTimeout(() => {
          setLoading(false);
        }, 2000)
      }} >
        点击发送请求
      </Button>

      <h2>图标</h2>
      <AlipayCircleOutlined style={{ fontSize: 40, color: '#1890ff', marginRight: 20 }} />
      <WechatOutlined style={{ fontSize: 40, color: 'green' }} />

      <h2>排版</h2>
      <h3>文字排版</h3>
      <p style={{fontSize: 24}}>不要<Text delete>998</Text>, 不要 <Text delete>888</Text>, 只需 <Text mark>99.8</Text>, 自行车让你骑回家</p>
      <h3>快速编辑</h3>
      <Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
      <h3>快速复制</h3>
      <Paragraph copyable>This is a copyable text.</Paragraph>
    </div>
  )
}
